<template>
  <div class="digital-teaching-material">
    <!-- 菜单 -->
    <menu-vue
      ref="mentRef"
      :blackboard="chalkboarData.banHaveBan"
      :canvasMode="panelShow"
      :setPenSizeAndColor="setPenSizeAndColor"
      @ctnHand="ctnHand"
      @ctxHand="ctxHand"
      @message="tsText"
    />
    <!-- 黑板 -->
    <div v-show="chalkboarData.banHaveBan">
      <chalkboard
        ref="chalkboardRef"
        class="chalk-board"
        :is-banca="chalkboarData.isBanca"
        :is-clear="chalkboarData.isClear"
        :line-width="chalkboarData.lineWidth"
        :line-color="chalkboarData.lineColor"
        :open-status="chalkboarData.openStatus"
      />
      <el-button v-show="isHb" id="qingkong" type="danger" style="background: #f56c6c" @touchstart.prevent
        >清空</el-button
      >
    </div>

    <!-- 主窗口canvas（保持一个） -->
    <div id="graph-id" v-show="panelShow">
      <!-- 绘制画笔以及图形窗口 -->
      <graph :page="pptTotals.current" :icon="svgConfigCache" :pages="pptTotals.totalPages" />
    </div>
  </div>
</template>
<script setup>
import { ref, h, reactive, computed, nextTick, onMounted, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';
import MenuVue from '../../component/menu.vue';
// 形状
import graph from '../../component/tools/graph/index.vue';
// 黑板
import { chalkboard } from '../../component/tools';
// 黑板画笔
import pencil from '../../assets/teaching/pencil2.png';
import eraser from '../../assets/eraser.svg';
import { getSizeColor, setSizeColor } from '../../utils/sizeColor';
import useStore from '../../store';
import { isObject } from 'lodash';
import { saveStorage, getStorage } from '../../utils/tools';

const store = useStore();
const { config, menu } = store;

// 获取黑板得dom元素
const board = ref();

const mentRef = ref();
// 定义有多少张画布（主窗口下只会有一个，但是如果是在ppt模式下，有多少张ppt，就会有多少张画板）
const pptTotals = reactive({
  totalPages: 1, // 一共多少张
  current: 1, // 默认只有一个
});
// 动态设置画笔size
const setPenSizeAndColor = (size, color) => {
  const { icon } = svgConfigCache.value;
  // 独立存储 黑板 或者 画笔时的颜色大小选择
  let keyname = icon;
  // 如果是黑板
  if (isHb.value) {
    keyname = 'blackboard';
  }
  // 获取旧配置
  const getDeep = getSizeColor(keyname);
  // 合并新配置
  const newStyle = {
    ...getDeep,
    ...svgConfigCache.value,
  };
  // 设置画笔大小
  if (size) {
    newStyle.size = size;
  }
  // 设置画笔颜色
  if (color) {
    newStyle.color = color;
  }
  // 执行配置
  delete newStyle.clear;
  // 执行新配置
  // 这里 size发生了改变
  createSvgCursorStyle(newStyle);
  // 如果是黑板状态 存储黑板数据
  if (isHb.value) {
    if (size) chalkboarData.lineWidth = size;
    if (color) chalkboarData.lineColor = color;
    // 存储黑板新配置
    setSizeColor('blackboard', newStyle);
  } else {
    // 存储画笔新配置
    setSizeColor(keyname, newStyle);
  }
};

// 选择功能提示符
let ElMsg = null;
const tsText = (message, text) => {
  if (ElMsg) {
    ElMsg.close();
    ElMsg = null;
  }
  ElMsg = ElMessage({
    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
      h('span', null, message),
      text && h('span', { style: 'color: teal' }, text),
    ]),
    grouping: true,
  });
};

// 功能性按钮点击事件
// 当前执行的功能 保存当前状态
const shoukeType = ref('');
const ctnHand = (name) => {
  switch (name) {
    // 切换鼠标
    // 直接从画板状态切换为桌面
    case 'mouse':
      // 判断是否是在黑板状态
      if (chalkboarData.banHaveBan) {
        // 如果是黑板状态，关闭黑板绘制功能
        chalkboarData.openStatus = false;
        board.value.style.cursor = 'auto';
      }
      // 如果是画笔打开状态，请空状态，关闭画笔
      mentRef.value.clearCtxStatus();
      shoukeType.value = '';
      // 关闭画笔时，开启穿透（兼容触摸屏）
      // // 如果是点击鼠标或者是切换画布，不关闭穿透（因为移走之后会触发）
      // mentRef.value.mouseHandle(true);
      // tsText('画板模式已退出');
      break;
    // 切换画布
    // 1. 如果画布打开状态，关闭画布
    // 2. 如果画布关闭状态，打开画布
    case 'changeCanvas':
      // canvas画布块，切换画布的时候，隐藏掉画布
      const graph = document.getElementById('graph-id');
      if (graph) {
        if (!panelShow.value) {
          // 1. 如果画布关闭 就打开
          chalkboarData.onlyBan = false;
          shoukeType.value = 'brush';
          mentRef.value.setCtxs('brush');
        } else {
          // 2. 如果已经打开画布就关闭
          shoukeType.value = '';
          // 如果是在黑板上打开的画布,切换到黑板上去
          if (chalkboarData.banHaveBan) {
            chalkboarData.onlyBan = true;
          } else {
            // 如果是在课件或者其他地方关闭画布
            mentRef.value.clearCtxStatus();
          }
        }
      }
      break;
    // 当选择图形时，打开画布
    case 'shapes':
      // console.log('开始选择图形');
      chalkboarData.onlyBan = false;
      shoukeType.value = 'brush';
      // mentRef.value.setCtxs('brush');
      break;
    // 收起
    case 'packup':
      if (!panelShow.value) {
        mentRef.value.mouseHandle(true);
      }
      break;
    // 清空画布
    case 'clearCanvas':
      // 如果是在黑板上画画 清空黑板
      if (isHb.value) {
        banHavaBanClick(name);
      } else {
        // 清空画布
        const config = mentRef.value.svgConfig();
        createSvgCursorStyle({ ...config, clear: name === 'clearCanvas' });
      }
      break;
    // 接入手机
    case 'wslink':
      // console.log('接入手机打开');
      break;
    default:
      // shoukeType.value = name;
      break;
  }
};

// 判断shoukeType的状态
const panelShow = computed(() => {
  // 不是黑板，且是一下几种类型时 出现
  return ['brush', 'brushSvg', 'eraser', 'shapes'].includes(shoukeType.value);
});

// 点击黑板之前的操作保存
const beforeBlackboard = ref();
const chalkboarData = reactive({
  isBanca: true, // 黑板擦功能
  banHaveBan: false, // 开启黑板
  onlyBan: false, // 是否只有黑板，如果点击切换画布时，就会盖住黑板
  openStatus: true, // 默认开启黑板绘制
  isClear: false,
  lineWidth: '4',
  lineColor: 'red',
});

// 判断是否是黑板状态下
const isHb = computed(() => {
  return chalkboarData.banHaveBan && chalkboarData.onlyBan;
});

// 处理状态为黑板时，点击画笔和橡皮
const chalkboardRef = ref();
const banHavaBanClick = (name) => {
  console.log('黑板in');
  const boardRef = board.value;
  chalkboarData.openStatus = true;
  switch (name) {
    // 画笔
    case 'brush':
    case 'brushSvg':
      chalkboarData.isBanca = false;
      break;
    // 橡皮
    case 'eraser':
      chalkboarData.isBanca = true;
      break;
    // 清空
    case 'clearCanvas':
      chalkboardRef.value.clear();
      break;
  }
  // 任务栏高度
  const taskHeight = getStorage('taskHeight') || 0;

  if (chalkboarData.isBanca) {
    // 让箭头指向居中位置
    boardRef.style.cursor = `url(${eraser}) 0 ${-taskHeight}, auto`;
  } else {
    // 画笔
    boardRef.style.cursor = `url(${pencil}) 0 -${taskHeight}, auto`; // 热区在图像左上角
  }
};

// 内容型按钮点击事件
const ctxHand = async (name) => {
  await nextTick();
  switch (name) {
    // 画笔
    case 'brush':
    // 画图
    case 'brushSvg':
    // 橡皮擦
    case 'eraser':
    case 'clearCanvas':
      // 如果是在黑板状态下点击
      if (isHb.value) {
        // console.log('黑板可用状态下点击');
        banHavaBanClick(name);
        const deepConfig = getSizeColor('blackboard');
        deepConfig.timer = new Date().getTime();
        // 执行配置更改
        createSvgCursorStyle(deepConfig);
        // 回显配置
        config.setConfig(deepConfig);
        // 获取配置并同步
      } else {
        // getSizeColor初次获取可能是空
        const deepConfig = getSizeColor(name);
        deepConfig.timer = new Date().getTime();
        // 执行配置更改
        createSvgCursorStyle(deepConfig);
        // 回显配置
        config.setConfig(deepConfig);
        // 画图和画笔统一使用brush (因为没有brushSvg，加svg只是为了区分是否是画图)
        shoukeType.value = name == 'brushSvg' ? 'brush' : name;
      }
      break;
    // 黑板
    case 'blackboard':
      // 黑板未创建，创建黑板
      if (!chalkboarData.banHaveBan) {
        // 创建清空画布按钮
        const boxDiv = document.getElementById('qingkong');
        boxDiv.style.position = 'fixed';
        boxDiv.style.left = '93%';
        boxDiv.style.top = '92%';
        boxDiv.style.display = 'block';
        // 点击清空
        boxDiv.onclick = () => {
          const panter = window.Painter;
          panter.clearCls();
          // 清空画布，如果是黑板擦状态，切换为画笔
          // mentRef.value.setCtxs('brush');
        };
        // 保存黑板之前的状态（再次点击板中版时）
        beforeBlackboard.value = shoukeType.value || 'brush';
        shoukeType.value = name;
        // 修改状态为黑板
        chalkboarData.banHaveBan = true;
        chalkboarData.onlyBan = true;
        // 默认情况下 选中画笔 (选中画笔,不打开颜色选择框)
        mentRef.value.setCtxs('brush', false);
        banHavaBanClick(name);
        // 选中黑板时，回显上一次的板中扳的画笔设置
        const deepConfig = getSizeColor(name);
        deepConfig.timer = new Date().getTime();
        chalkboarData.lineColor = deepConfig.color;
        chalkboarData.lineWidth = deepConfig.size;
        //
        // tsText('进入黑板');
      } else {
        // 隐藏黑板
        if (mentRef.value) {
          chalkboarData.banHaveBan = false;
          // 清空选中状态
          mentRef.value.clearCtxStatus();
        }
        // 选中之前的状态
        // tsText('退出黑板');
      }
      break;
    // 工具箱
    case 'toolCabinet':
      // 选中工具箱
      mentRef.value.setCtxs('toolCabinet');
      // 点击工具箱 执行配置
      createSvgCursorStyle({
        icon: 'toolCabinet',
      });
      break;
    default:
      // 处理其他情况
      break;
  }
};
//
const svgConfigCache = ref({ icon: '', size: '', color: '' });
const createSvgCursorStyle = (config) => {
  // 保存配置
  svgConfigCache.value = config;
};

const resizeBodySize = () => {
  const newHeight = window.innerHeight;
  const dom = document.querySelector('.digital-teaching-material');
  dom.style.height = `${newHeight}px`;
};

const r = (key) => `20180428_${key}`;

onMounted(() => {
  // 绑定黑板dom元素
  board.value = document.querySelector('.chalk-board');

  // 获取主窗口mainWindow下面webView内的local参数（嵌入iframe需要传递）
  // 参数为需要的localStorage获取的存储的key
  window.electronAPI
    ?.getTokenAndOtherData(JSON.stringify(['token', r('schoolId'), r('drawType'), r('userId'), r('webSocketUrl')]))
    .then(async (res) => {
      if (isObject(res)) {
        for (const key in res) {
          saveStorage(key, res[key]);
        }
        // 将进入得类型存到store内
        menu.setInType(res[r('drawType')]);
      }
    });

  // 注册监听 set-course 传递的参数, 赋值给课程资源
  window.electronAPI?.receiveMessage('set-course', (data) => {
    // 显示 授课资源
    menu.setCourseData(data);
    menu.setSlideRPanel(true);
  });

  // 注册监听退出授课模式(隐藏侧边栏按钮)
  window.electronAPI?.receiveMessage('watch-teaching-quit', () => {
    // 显示 授课资源
    menu.setSlideRPanel(false);
  });

  window.addEventListener('resize', resizeBodySize);
  resizeBodySize();
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeBodySize);
});
</script>
<style scoped>
.digital-teaching-material {
  /* 防止页面出现滚动 */
  overflow: hidden;
}

.digital-teaching-draw {
  background: rgba(0, 0, 0, 0.2);
}
</style>
